import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Space } from 'antd';
import ProCard from '@ant-design/pro-card';
import { BetaSchemaForm, ProFormInstance } from '@ant-design/pro-form';

import styles from './index.less';
import { useRequest } from '@/hooks';
import { ProColumns } from '@ant-design/pro-table/lib/typing';
import { ProFormColumnsType } from '@ant-design/pro-form/lib/components/SchemaForm';

export default () => {

    const [readOnly, readOnlyChange] = React.useState<boolean>(true);

    const formRef = React.useRef<ProFormInstance>();
    const columns: ProColumns[] & ProFormColumnsType[] = [
        {
            dataIndex: 'id',
            hideInTable: true,
            hideInSearch: true,
            formItemProps: {
                hidden: true,
            }
        },
        {
            key: 'name',
            title: '产品名',
            sorter: true,
            dataIndex: 'name',
            fieldProps: {
                maxLength: 15,
                disabled: readOnly
            },
            formItemProps: {
                rules: [{required: true}],
            }
        },
        {
            title: '产品描述',
            dataIndex: 'describeString',
            formItemProps: {
                rules: [{required: true}]
            },
            fieldProps: {
                maxLength: 15,
                disabled: readOnly
            },
        },
        {
            title: '价格',
            dataIndex: 'price',
            valueType: 'money',
            formItemProps: {
                rules: [{required: true}],
            },
            fieldProps: {
                maxLength: 7,
                disabled: readOnly,
            },
        },
    ];

    const queryFormData = async () => {
        await useRequest({
            url: '/product/1',
        }).then(({data}) => {
            formRef.current?.setFieldsValue(data)
        })
    }

    React.useEffect(() => {
        queryFormData()
    }, [])
    return <PageContainer
        title='产品信息修改'
        className={styles.pageContainer}
        subTitle='修改产品标题、价格等信息'
        extra={[
            <Button key='edit' type='primary' onClick={() => {
                readOnlyChange(!readOnly)
                if (!readOnly) {
                    queryFormData()
                }
            }}>
                {readOnly ? '修改' : '取消'}
            </Button>
        ]}
        footer={readOnly ? [] :
            [
                <Button key='edit'
                        type='primary'
                        onClick={async () => {
                            const fieldsValue = await formRef.current?.validateFieldsReturnFormatValue?.()
                            await useRequest({
                                url: '/product',
                                method: 'POST',
                                data: fieldsValue
                            })
                            readOnlyChange(true)
                            queryFormData()
                        }}>
                    确认
                </Button>
            ]}>
        <Space direction='vertical' className={styles.editTab}>
            <ProCard title='编辑信息' className={styles.card}>
                <BetaSchemaForm
                    formRef={formRef}
                    className={styles.form}
                    layout='horizontal'
                    labelCol={{span: 5}}
                    submitter={false}
                    columns={columns}
                />
            </ProCard>
        </Space>
    </PageContainer>;
}
